<template>
	<view class="group">
		<!-- 组局主页面 -->
		<view class="header">
			<text>正在组局：{{num}}</text>
			<button @click="TextView"><text class="iconfont icon-weixin" style="font-size: 20px;"></text>新本信息</button>
		</view>
		<view class="centern" v-for=" (i,v) in tushu" :key="v" @click="scriptJump(i.id)">
			<view class="script">
				<image :src="'http://124.220.177.66:8082'+i.scriptUrl" alt=""></image>
				<view class="center">
					<view class="center-v">
						<text class="reason ">{{i.scriptName}}</text>
						<text class="reason-s">人数：{{i.peopleCount}}/{{i.peopleNum}}</text>
					</view>
					<view class="reason-c">
						<text>{{i.themeName}}</text>
					</view>
					<button v-if="i.orderStatus==-1">过期</button>
					<button v-if="i.orderStatus==1">组局中</button>
					<button v-if="i.orderStatus==2">满员</button>
					<button v-if="i.orderStatus==3">游戏中</button>
					<view class="data">
						<text
							class="">开局时间：{{new Date(i.gameStartDateTime).toLocaleDateString().replace(/\//g,'-')+' '+new Date(i.gameStartDateTime).toTimeString().substr(0, 5)}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="caution">
			<text class="iconfont icon-gantanhao-yuankuang tubiao" style="font-size: 20px;"></text>
			<text class="word ">没有你想玩的？联系本店帮你发布新的组局</text>
		</view>
		<view class="end">
			<view class="end-first">
				<text class="iconfont icon-z-weixin"></text>
				<text>{{wechat}}</text>
				<button @click="copy">复制</button>
				<uni-popup ref="popup" type="bottom">
					<view class="Dialog">

						<view class="psdCopy">
							<text @click="dial(storeManagerPhone)">电话：{{storeManagerPhone}}</text>
						</view>

						<view class="psdCopys" @click="oncopy">
							<text>微信：{{wechat}}(复制)</text>
						</view>
					<view @click="cancel" class="btn-cancel">
						<button>取消</button>
					</view>	
					</view>
				</uni-popup>
			</view>
			<view class="end-last">
				<text class="iconfont icon-dianhuatianchong"></text>
				<text @click="copy">{{storeManagerPhone}}</text>
			</view>

		</view>
		<!-- //复制弹窗 -->

		<!-- //新本信息	 -->


		<view class="popup" v-if="popup">
			<view class="title">
				<text>新书到店</text>
			</view>
			<view class="popup-content">
				<view>玫瑰女王选举日：魔法世界</view>
				<view>必须犯规的游戏：7人机制</view>
				<view>前男友100种死法：5人机制</view>
				<view>星星电灯：7人机制</view>
				<view>一封书信：8人机制</view>
			</view>
			<button class="popup-btn" @click="clear">取消</button>
		</view>


	</view>
</template>

<script>
	import http from '../../utils/http.js'
	export default {
		data() {
			return {
				tushu: [],
				num: '',
				peopleNum: '',
				id: '',
				peopleCount: '',
				zhuangtai: '',
				scriptName: '',
				gameStartDateTime: '',
				popup: false,
				wechat: '123 22222555',
				storeManagerPhone: '123456789123',

			}
		},

		methods: {
			TextView() {
				this.popup = true
			},
			clear() {

				this.popup = false
			},
			//打开微信弹窗
			copy() {
				this.$refs.popup.open('bottom')
				// this.state = true
			},
			//微信弹窗关闭
			cancel() {
				// this.state = false
				this.$refs.popup.close('')
			},
			//复制微信
			oncopy() {


				wx.setClipboardData({
					data: this.wx,
					success: (res) => {
						// this.state = false;
						this.$refs.popup.close('')
					}
				})
			},
			//渲染组局
			pageShow() {
				http.http({
					url: '/juben/getAllGroup',
					method: 'get',

				}).then((res) => {
					console.log(res.data.data);

					this.tushu = res.data.data
					this.num = res.data.data.length
					let sss = new Date()


				})
			},
			//访问店铺信息拿到微信和电话
			showPage() {
				http.http({
					url: '/juben/getStore',
					method: 'get',

				}).then((res) => {
					console.log(res.data.data);

					this.storeManagerPhone = res.data.data[0].storeManagerPhone
					this.wechat = res.data.data[0].wechat


				})
			},
			// 跳转时候把组局id传给跳转页面
			scriptJump(id) {
				// console.log(id)
				uni.navigateTo({
					url: '/pages/GroupBureau/details/details?id=' + id
				});
			},
			dial(phone) {
				console.log(phone);
				wx.makePhoneCall({
					phoneNumber: phone,
					// success(){},
					// fail(){}
				})
			}

		},

		created() {
			this.pageShow()
			this.showPage()
		}
	}
</script>

<style lang="scss">
	@import url('~@/static/iconfont/iconfont.css');

	page {
		height: 100%;
		padding: 0;
		margin: 0;
		font-size: 20rpx;
		background-color: #0D141F;
		position: relative;


		.group {
			height: 100%;
			background-color: #0D141F;
			color: white;
			font-size: 30rpx;
			position: relative;
		}


		.header {
			position: relative;
			display: flex;
			width: 96%;
			line-height: 80rpx;
			background-color: #232433;
			height: 80rpx;
			margin: 16rpx;
			border-radius: 12rpx;

			text {
				margin-left: 12rpx;
			}

			button {
				position: absolute;
				right: 12rpx;
				margin-top: 12rpx;
				color: white;
				// display: inline;
				border-radius: 20rpx;
				line-height: 60rpx;
				width: 200rpx;
				height: 60rpx;
				font-size: 23rpx;
				background: linear-gradient(to right, purple, blue)
			}
		}

		.centern {
			.script {
				display: flex;
				height: 300rpx;
				width: 96%;
				background-color: #232433;
				position: relative;
				margin: 12rpx;
				border-radius: 12rpx;

				image {
					margin: 20rpx 20rpx;

					width: 200rpx;
					height: 260rpx;
				}

				.center {
					margin: 20rpx 20rpx;

					.center-v {
						.reason {
							font-weight: bold;
							font-size: 30rpx;
						}

						.reason-s {
							font-size: 26rpx;
							color: white;
							position: absolute;
							right: 16rpx;
						}
					}
				}

				.reason-c {
					font-size: 25rpx;
				}

				button {
					font-size: 24rpx;
					width: 200rpx;
					height: 80rpx;
					line-height: 80rpx;
					background-color: #623685;
					color: white;
					position: absolute;
					right: 10rpx;
					margin-top: 40rpx;
				}

				.data {
					font-size: 25rpx;
					margin-top: 150rpx;
				}
			}
		}

		.caution {

			// margin-left: 15px;
			text-align: center;

			.tubiao {
				color: #f76260;
				margin-right: 12rpx;
			}

			.word {
				color: #5a576e;
				font-size: 26rpx
			}
		}

		.end {
			font-size: 25rpx;
			width: 96%;
			margin-left: 25rpx;
			margin-top: 30rpx;
			display: flex;

			.end-first {
				width: 55%;
				margin-left: 40rpx;
				display: flex;

				button:nth-child(3) {
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					background-color: #f4b845;
					font-size: 24rpx;
					color: white;
				}
				text:nth-child(1){
					font-size: 29rpx;
					margin-right: 10rpx;
				}
				
			}

			.end-last {
				width: 35%;
				text-align: right;
			text:nth-child(1){
					font-size: 29rpx;
					margin-right: 10rpx;
				}
			}

			.Dialog {
				padding-top: 50rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				text-align: center;
				margin: 0 auto;
				width: 100%;
				height: 400rpx;
				color: #07c160;
				background-color: white;
				font-size: 35rpx;
				view{
					padding-bottom: 20rpx;
				}

				.psdCopy {
					margin: 0rpx auto;
					width: 500rpx;
					border-bottom: 1px solid #ccc;
				}

				.psdCopys {
					margin: 50rpx auto;
					width: 500rpx;
					// padding-bottom: 30rpx;
					border-bottom: 1px solid #ccc;
				}

				.btn-cancel {
					margin-top: 40rpx;
					
					
					button{
					font-size: 28rpx;
						color: #07c160;
						width: 250rpx;
						height: 80rpx;
						line-height: 80rpx;
						}
				}

			}
		}



		.popup {
			width: 500rpx;
			// z-index: 1000px;
			height: 520rpx;
			color: black;
			background-color: white;
			position: fixed;
			bottom: 200rpx;
			left: 15%;

			// left: 15%;
			.title {
				height: 80rpx;
				line-height: 80rpx;
				background-color: #232433;
				color: white;
				font-weight: bold;
				font-size: 28rpx;
				text-align: center;
			}

			.popup-content {
				view {
					height: 50rpx;
					font-size: 27rpx;
					text-align: center;
					margin-top: 30rpx;
					border-bottom: 3px solid #e9e9e9;
					border-radius: 0;
				}
			}

			.popup-btn {
				font-size: 26rpx;
				background-color: #232433;
			}

		}

	}
</style>
